function Engine(/*vec2*/ canvasSize, /*Div*/ canvasContainer){
	this.canvas = this.createCanvas(canvasSize, canvasContainer);
	this.ctx = this.createContext(this.canvas);
	
	this.images = [];
	
	this.emptVec = vec2(0,0);
}

Engine.prototype.createCanvas = function(/*vec2*/ size, /*Div*/ container){
	var canvas = document.createElement("canvas");
	
	canvas.width = size.a;
	canvas.height = size.b;
	
	container.appendChild(canvas);
	
	return canvas;
};


Engine.prototype.createContext = function(/*Canvas*/ canvas){
	var ctx = canvas.getContext("2d");
	
	ctx.width = canvas.width;
	ctx.height = canvas.height;
	
	return ctx;
};

Engine.prototype.loadImage = function(/*String*/ url, /*vec2*/ imgNum, /*vec2*/ offset){
	var img = new Image();
	
	img.src = url;
	img.imgNum = imgNum;
	img.ready = false;
	img.offset = (offset)? offset : this.emptVec;
	
	Utils.addEvent(img, "load", function(){
		img.ready = true;
		
		img.imgW = img.width / img.imgNum.a;
		img.imgH = img.height / img.imgNum.b;
	});
	
	img.id = this.images.length;
	this.images.push(img);
	
	return img;
};

Engine.prototype.drawSprite = function(/*Image*/ img, /*vec2*/ subImg, /*vec2*/ position){
	var ctx = this.ctx;
	
	var tx = img.imgW * subImg.a;
	var ty = img.imgH * subImg.b;
	
	ctx.drawImage(img,
		tx, ty, img.imgW, img.imgH,
		position.a, position.b, img.imgW, img.imgH);
	
};

Engine.prototype.areImagesReady = function(){
	for (var i=0,len=this.images.length;i<len;i++){
		if (!this.images[i].ready)
			return false;
	} 
	
	return true;
};

Engine.prototype.getImagesReadyPercent = function(){
	var total = 0;
	var len=this.images.length;
	if (len == 0) return 1;
	
	for (var i=0;i<len;i++){
		if (this.images[i].ready)
			total++;
	} 
	
	return total / len;
};
